<template>
  <div class="main">
    <mobile-bar></mobile-bar>
    
    <div class="new" v-show="newFlag">
      
        <div class="create" @click="create()">
               <div>新 建+</div> 
        </div>
    </div>
    <div class="answer" v-show="answerFlag">
      
        <div class="create">
               <div>新 建+</div> 
        </div>
    </div>
    <div class="show" v-show="showFlag">
      
        <div class="show">
               <div class="paper">
                 <div style="color:#4873c0;font-size:1.2em">{{'标题'}}</div>
                 <div style="margin-left:50%">{{'2021.10.15'}}</div>
                 </div>  
               
        </div>
    </div>


<!-- <div style="margin-bottom:12%"></div> -->
    <div class="bar-bottom">
      
      <div style="margin-top:6%;text-align:center;width:20%" @click="answerPage()">填写</div>
      <div  style="margin-top:6%;flex:1;text-align:center" @click="showPage()">试卷</div>
      <div  style="margin-top:6%;text-align:center;width:20%" @click="createPage()">新建</div>
  </div>
  </div>
</template>

<script>
import MobileBar from "./MobileBar.vue";

export default {
  components: {
    MobileBar,
  
  },
  data() {
    return {
      newFlag:true,
      answerFlag:false,
      showFlag:false
    };
  },
  methods: {
    create(){
      this.$router.push('/creat');
    },
    createPage(){
      this.showFlag=false;
      this.answerFlag=false;
      this.newFlag=true;
    },
    showPage(){
      this.newFlag=false;
      this.answerFlag=false;
      this.showFlag=true;
    },
    answerPage(){
      this.newFlag=false;
      this.showFlag=false;
      this.answerFlag=true;
    }
  },
};
</script>

<style scoped>
.main{
    background: #f5f5f5;
    width: 100%;
    height: 100%;
}
.bar-bottom {
  width: 100%;
  height: 10%;
  background: #fbfbfb;
  position: fixed;
  bottom: 0px;
  z-index: 999;
  border: 2px solid rgba(116, 115, 115, 0.12);
  color: #4873c0;
  display: flex;
  
}
.new{
    width: 100%;
    height: 80%;
    background: #f5f5f5;
   padding-top: 20%;
}
.create{
   margin: 20px;
    width: 45%;
    height: 15%;
    background: #ffffff;
    color: #4873c0;
    background:#ffffff;
    
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    
}
.show{
  width: 100%;
    height: 80%;
    background: #f5f5f5;
   padding-top: 12%;
   display: flex;
  
    
    justify-content: center;

}
.paper{
  width: 90%;
  height: 15%;
  background: #ffffff;
  border: 2px solid rgba(116, 115, 115, 0.12);
  border-radius: 8px;
  padding: 10px;
  display: flex;
}
</style>